<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #content {

            border: 5px solid black;
            font-style: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #content img {
            width: 500px;

        }

        #img-e {
            display: block;
            font-size: 0;
            margin-left: -500px;
        }
        .col{
            display: block;
            width: 10px;
            height: 10px;
            border: 1px solid black;
            border-radius: 50%;
            box-shadow: 0 0 10px black inset;
            
        }
        #box{
            width: 50px;font-size: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- width:imgs.length*500+'px'  -->
        <!-- ,overflow:'hidden' -->
        <div id="cont" :style="{ width:w+'px',overflow:'hidden'}">
            <div id="content" @transitionend="end"
                :style="{width:imgs.length*500+'px',transition:'all ' +time+'s',marginLeft: -500*num+'px',}">
                <img id="img-e" src="images/e.jpg" alt="">
                <img v-for="(item,index) in imgs" @click="demo" v-model="inde=index" :src="'images/'+item" alt="">
            </div>
            <!-- <div id="box"> 
                 <div class="col"@click= v-for="(item,index) in imgs"></div>
                </div> -->
          
      
        </div>


        <button @click='prev'>下一张</button>
        <button @click='increase'>上一张</button>

    </div>
</body>
<script>
    var App = new Vue({
        el: '#app',
        data: {
            flag: true,
            imgs: ["a.jpg", "b.jpg", "c.jpg", "d.jpg", "e.jpg", "a.jpg"],
            num: 0,
            time: 0.5,
            w: 500,
            inde:0,
        },
        methods: {
            demo:function(){
                console.log(this.index);
                
            },
            prev: function () {
                if (this.flag) { this.flag = false; this.num++; }
            },
            increase: function () {
                if (this.flag) { this.flag = false; this.num--; }
            },
            end: function () {
                // console.log("wowo");

                if (this.num == this.imgs.length - 1) {

                    this.num = 0;
                    this.time = 0;
                    var data = this;
                    // console.log("ddd");

                    setTimeout(() => {
                        data.time = 0.5
                    }, 16.7);
                    console.log("222");



                }
                if (this.num < 0) {

                    this.num = this.imgs.length - 2;
                    this.time = 0;
                    // this.num = 5;
                    var timer = this;

                    // console.log("ddd");
                    setTimeout(() => {
                        timer.time = 0.5
                    }, 16.7);
                    console.log("111");


                }
                this.flag = true


            }
        }
    })
</script>

</html>